<template>
  <el-aside :width="menuStore.state ? '65px' : '180px'">
    <el-menu
      class="el-menu-vertical-demo"
      text-color="rgb(131, 131, 131)"
      :collapse="menuStore.state"
      :collapse-transition="false"
      :router="true"
      :default-active="route.fullPath"
    >
      <!-- <h3 v-show="!menuStore.state">后台管理</h3>
      <h3 v-show="menuStore.state">后台</h3> -->
      <el-image style="width: 100%; height: 8vh" :src="logo" :fit="fit" />
      <el-menu-item
        @click="clickMenu(item)"
        :index="item.path"
        v-for="item in noChildren()"
        :key="item.path"
      >
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </el-menu-item>
      <el-sub-menu
        :index="item.path"
        v-for="item in hasChildren()"
        :key="item.path"
      >
        <!-- 其它选项 -->
        <template #title>
          <component class="icons" :is="item.icon"></component>
          <span>{{ item.label }}</span>
        </template>

        <el-menu-item-group>
          <el-menu-item
            :index="subItem.path"
            v-for="(subItem, subIndex) in item.children"
            :key="subIndex"
            @click="clickMenu(subItem)"
          >
            <!-- 其它选项内的选项 -->
            <template #title>
              <component class="icons" :is="subItem.icon"></component>
              <span>{{ subItem.label }}</span>
            </template>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { useRouter } from "vue-router";
import { useMenuStore } from "../stores/menu";
import { SelectMenu } from "../stores/menu";
import { useRoute } from "vue-router";
import { onMounted } from "vue";
const logo = new URL("../assets/image/logo-modified.png", import.meta.url).href;
const fit = "cover";
const menuStore = useMenuStore();
const route = useRoute();
const router = useRouter();

onMounted(() => {
  useMenuStore().getState();
});
const noChildren = () => {
  return asyncList.filter((item) => !item.children);
};
const hasChildren = () => {
  return asyncList.filter((item) => item.children);
};
const { selectMenu } = SelectMenu();
const asyncList = SelectMenu().menu;
const clickMenu = (item) => {
  router.push({
    name: item.name,
  });
  // pinia状态管理
  selectMenu(item);
};
</script>

<style scoped>
.el-aside {
  transition: 0.3s;
}
.icons {
  width: 20px;
  margin-right: 10px;
}
.el-menu {
  border-right: none;
}
.el-menu-vertical-demo .el-image {
  color: rgb(131, 131, 131);
  text-align: center;
  margin: 10px 0;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}
</style>
